<template>
  <div class=''>
    <h2>动画</h2>
    <button @click="show = !show">点我</button>
    <!-- <transition name="bounce" type="tranition" appear enter-active-class="animated swing fade-enter-active"
      leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing">
      <p v-if="show">学的不仅是技术，更是梦想！！！</p>
    </transition> -->
    <!-- <transition :duration="5000" name="bounce" type="animation" appear enter-active-class="animated swing fade-enter-active"
      leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing">
      <p v-if="show">学的不仅是技术，更是梦想！！！</p>
    </transition> -->

    <transition :duration="{ enter: 5000, leave: 10000 }" name="bounce" type="animation" appear enter-active-class="animated swing fade-enter-active"
      leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing">
      <p v-if="show">学的不仅是技术，更是梦想！！！</p>
    </transition>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      show: true
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeAim() {
      this.isShow = !this.isShow
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
}
</script>
<style lang='scss' scoped>
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s;
}
</style>